<script setup lang="tsx">
import { onMounted, ref } from "vue";
import { getInstanceLog, InstanceDetailsReq, InstanceInfo } from "@/api/job";
import { StringPage } from "./utils/types";
import { jobUrlApi } from "@/api/utils";
import { downLoadByUrl } from "@/utils/download";

const props = defineProps<InstanceInfo>();

const logDetails = ref<StringPage>({ index: 0 });

onMounted(() => {
  retrieveLogs();
});

function retrieveLogs() {
  var data = {
    ...logDetails.value,
    appId: props.appId,
    instanceId: props.id
  };
  getInstanceLog(data, props.appId).then(res => {
    logDetails.value = res;
  });
}
// 查看其它页的在线日志
function onClickChangeLogPage(index: number) {
  logDetails.value.index = index - 1;
  retrieveLogs();
}

function onclickDownloadLog() {
  let url = jobUrlApi("/instance/v1/instance/downloadLog/" + props.id);
  downLoadByUrl(url, props.id + ".log", {
    headers: {
      "app-id": props.appId
    }
  });
}
</script>
<template>
  <el-row>
    <el-col
      :span="24"
      class="power-instance-log-download"
      style="margin-bottom: 20px"
    >
      <el-button
        type="primary"
        size="mini"
        icon="el-icon-download"
        @click="onclickDownloadLog"
        >下载</el-button
      >
    </el-col>
  </el-row>
  <div class="power-instance-log-dialog">
    <el-row>
      <el-col :span="24">
        <h4 style="white-space: pre-line">{{ logDetails.data }}</h4>
      </el-col>
    </el-row>
  </div>
  <el-row>
    <el-col :span="24">
      <el-pagination
        :page-count="logDetails.totalPages"
        layout="prev, pager, next"
        @current-change="onClickChangeLogPage"
      />
    </el-col>
  </el-row>
</template>
